<template>
	<view class="pb-150">
		<!-- 导航栏 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
		<u-navbar title="投诉建议" :autoBack="true" leftIconColor="#FFF" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder>
			<!-- <view class="u-nav-slot" slot="right">
				<view class="fs-32 colfff" @tap="search()">筛选</view>
			</view> -->
		</u-navbar>
		<view class="w-710 mt-20 bgff pl-32 pr-32 br-20 mgt">
			<!-- 输入框 -->
			<view class="rowsb rowsm h-104" style="border-bottom: 2rpx solid #f1f1f1;">
				<view>通知标题</view>
				<input class="trt fs-28" placeholder="请输入标题" v-model="formData.name" />
			</view>
			<view class="rowsb rowsm h-104" style="border-bottom: 2rpx solid #f1f1f1;" @tap="open()">
				<view>接收者</view>
				<view class="trt fs-28 col999 rowsc rowsm" v-if="!formData.receiver">请选择
					<u-icon name="arrow-right" size="17" color="#999" style="vertical-align: top;"></u-icon>
				</view>
				<view class="trt fs-28" v-else>{{ formData.receiver }}</view>
			</view>
			<view class="rowsb rowsm h-100 bor-b" @tap="typePicker = true" style="border-bottom: 2rpx solid #f1f1f1;">
				<view>通知类型</view>
				<view class="trt fs-28 col999 rowsc rowsm" v-if="!formData.type">请选择
					<u-icon name="arrow-right" size="17" color="#999" style="vertical-align: top;"></u-icon>
				</view>
				<view class="trt fs-28" v-else>{{ formData.type }}</view>
			</view>
			<view class="rowsb rowsm h-100 bor-b" @tap="levelPicker = true" style="border-bottom: 2rpx solid #f1f1f1;">
				<view>紧急程度</view>
				<view class="trt fs-28 col999 rowsc rowsm" v-if="!formData.level">请选择
					<u-icon name="arrow-right" size="17" color="#999" style="vertical-align: top;"></u-icon>
				</view>
				<view class="trt fs-28" v-else>{{ formData.level }}</view>
			</view>
			<view class="rowsb rowsm h-100 bor-b" @tap="replyPicker = true" style="border-bottom: 2rpx solid #f1f1f1;">
				<view>回复标识</view>
				<view class="trt fs-28 col999 rowsc rowsm" v-if="!formData.reply">请选择
					<u-icon name="arrow-right" size="17" color="#999" style="vertical-align: top;"></u-icon>
				</view>
				<view class="trt fs-28" v-else>{{ formData.reply }}</view>
			</view>
			<view class="rowsl pb-20" style="border-bottom: 2rpx solid #f1f1f1;">
				<view class="mt-20 mb-20">通知正文</view>
				<textarea class="desc-textarea" v-model="desc" placeholder="请输入..." :maxlength="300" auto-height />
			</view>
			<!-- 附件信息 -->
			<view class="rowsl pt-16 pb-20" style="border-bottom: 2rpx solid #f1f1f1;">
				<view class="rowsl mb-12">
					<view class="mt-20 mb-20">附件信息</view>
					<view class="rowsm">
						<u-button size="small" type="primary" text="上传文件" @click="chooseFile"></u-button>
					</view>
				</view>
				<!-- 已选文件列表 -->
				<view v-if="attachments.length" class="fs-26 col666">
					<view v-for="(f, idx) in attachments" :key="idx" class="rowsb rowsm mb-12">
						<text class="one_overflow" style="max-width: 520rpx;">{{ f.name || f.fileName }}</text>
						<view class="rowsm">
							<u-button size="mini" text="删除" type="error" @click="removeAttachment(idx)"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="typePicker" :columns="typeColumns" @confirm="typeConfirm" @cancel="typePicker = false"
			@close="typePicker = false" />
		<u-picker :show="levelPicker" :columns="levelColumns" @confirm="levelConfirm" @cancel="levelPicker = false"
			@close="levelPicker = false" />
		<u-picker :show="replyPicker" :columns="replyColumns" @confirm="replyConfirm" @cancel="replyPicker = false"
			@close="replyPicker = false" />
		<!-- 选择接收人员弹框 -->
		<u-popup :show="show" mode="center" width="670rpx" @close="show = false" :round="22">
			<view class="w-670 bgfff br-32 rowsal pl-42 pr-42 pt-32 pb-32">
				<view class="fs-40 fw-b mb-20">请选择接收人员</view>
				<u-search placeholder="输入姓名或部门进行搜索" v-model="keyword"></u-search>
				<view class="rowsbl">
					<view class="fs-32 fw-500 mt-24 mb-24">
						<view class="rowsb rowsm">
							<view class="fs-32 fw-500 mt-24 mb-24">自定义组</view>
							<view class="fs-32 fw-500 mt-24 mb-24" @click="showAllUsers = !showAllUsers">
								<u-icon name="plus-circle" size="22" color="#0B993C"
									style="vertical-align: top;"></u-icon>
							</view>
						</view>
					</view>
					<view class="fs-32 fw-500 mt-24 mb-24">
						<view class="rowsb rowsm">
							<view class="fs-32 fw-500 mt-24 mb-24">所有人员</view>
							<view class="fs-32 fw-500 mt-24 mb-24" @click="showAllUsers = !showAllUsers">
								<u-icon name="plus-circle" size="22" color="#0B993C"
									style="vertical-align: top;"></u-icon>
							</view>
						</view>
						<!-- 多选框：默认隐藏，点“+”显示 -->
						<u-checkbox-group v-if="showAllUsers" v-model="checkboxValue1" placement="column"
							@change="checkboxChange">
							<u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList1"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>
			<view class="rowsa rowsm fs-36 fw-b" style="border-top: 1rpx solid #E5E5E5;">
				<view class="rowsc rowsm pt-32 pb-32" @click="show = false" style="">
					取消
				</view>
				<view class="rowsc rowsm h-60"
					style="border-left: 1rpx solid #E5E5E5;border-right: 1rpx solid #E5E5E5;">
				</view>
				<view class="rowsc rowsm pt-32 pb-32" @click="show = false">
					确定
				</view>
			</view>
		</u-popup>

		<view class="w-710 mt-20 bgff pl-32 pr-32 br-20 mgt rowsc rowsm">
			<view @tap="send()" class="w-300 h-88 br-16 fixed rowsc rowsm fs-36 colfff bg"
				style="bottom: 68rpx;left: 60rpx;">
				发送
			</view>
			<view @tap="submit()" class="w-300 h-88 br-16 fixed rowsc rowsm fs-36 colfff bg"
				style="bottom: 68rpx;right: 60rpx;">
				保存
			</view>
		</view>
	</view>
</template>

<script>
import upload from '@/utils/upload'

import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			desc: '',
			formData: {
				name: '',
				type: '',
				level: '',
				reply: '',
				receiver: ''
			},
			keyword: '',
			show: false,
			typePicker: false,
			levelPicker: false,
			replyPicker: false,
			typeColumns: [
				['投诉', '建议']
			],
			levelColumns: [
				['一般', '平急', '加急', '特急', '特提']
			],
			replyColumns: [
				['不需要回复', '需要回复']
			],
			checkboxValue1: [],
			checkboxList1: [
				{ name: '张三' },
				{ name: '李四' },
				{ name: '王五' }
			],
			showAllUsers: false, // 多选框默认隐藏
			attachments: [] // 已选附件
		}
	},
	methods: {
		open() {
			this.show = true
		},
		close() {
			this.show = false
		},
		typeConfirm(e) {
			this.formData.type = e.value[0]; // 回填
			this.typePicker = false; // 关闭
		},
		levelConfirm(e) {
			this.formData.level = e.value[0]; // 回填
			this.levelPicker = false; // 关闭
		},
		replyConfirm(e) {
			this.formData.reply = e.value[0]; // 回填
			this.replyPicker = false; // 关闭
		},
		checkboxChange(n) {
			console.log('change', n);
		},
		// 选择并上传附件（支持手机文件/图片）
		async chooseFile() {
			try {
				const fileRes = await uni.chooseFile({ count: 1 })
				const filePath = (fileRes.tempFiles && fileRes.tempFiles[0] && fileRes.tempFiles[0].path) || ''
				const fileName = (fileRes.tempFiles && fileRes.tempFiles[0] && fileRes.tempFiles[0].name) || 'file'

				if (!filePath) return

				uni.showLoading({ title: '上传中...' })
				const res = await upload({
					url: '/dev-api/common/upload', // 若依通用上传
					name: 'file',
					filePath
				})
				uni.hideLoading()
				// 成功：回填到附件列表（按后端返回字段适配）
				this.attachments.push({ name: fileName, url: (res.url || (res.data && res.data.url) || '') })
			} catch (e) {
				try { uni.hideLoading() } catch (err) { }
				uni.showToast({ title: '上传失败', icon: 'none' })
			}
		},
		removeAttachment(idx) {
			this.attachments.splice(idx, 1)
		},
		send() {
			// TODO: 发送逻辑，可把 attachments 一并提交
			console.log('发送', this.formData, this.desc, this.attachments)
		},
		submit() {
			// TODO: 保存草稿逻辑
			console.log('保存', this.formData, this.desc, this.attachments)
		}
	}
}
</script>

<style>
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	
	z-index: 1;
}

.desc-textarea {
	width: 100%;
	min-height: 400rpx;
	background: #f7f7f7;
	border-radius: 16rpx;
	padding: 24rpx;
	font-size: 28rpx;
	color: #333;
	border: none;
	resize: none;
}
</style>
